<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
  <link rel="stylesheet" type="text/css" href="css/tao.css"/>
		<link rel="stylesheet" type="text/css" href="css/gouwuche.css"/>
		<link rel="stylesheet" type="text/css" href="css/etao-top-nav-wrap.css"/>
		
		
		<style type="text/css">
			#top-tipfl img{
				height: 42px;
			}
		</style>
	</head>
	<body>
		
    
    <!--<input id="search" type="text" placeholder="请输入要搜索的内容">-->
    <script src="js/myajax.js" charset="utf-8"></script>	
    <script>
      var oSearch = document.querySelector("#search");
      oSearch.onkeyup = function(event) {
        if (event.keyCode === 13) {
          location.href = 'search.html?search_text='+this.value;
        }
      }
    </script>
    <div id="etao-top-nav-wrap">
			<div id="etao-top-navclearfix">
				<div id="top-nav-loginfl">
				    <a href="register.html" name="register" class="register">注册</a>
    <a href="login.html" name="login" class="login">登录</a>
    <a href="#" name="username" class="username">    </a>
    <!-- 可以在a链接里面写javascript代码，在href属性中以javascript:开头，后面写js代码 -->
  <a href="javascript:localStorage.clear(); location.reload();" class="logout">退出</a>
    <script>
      //判断用户名如果存在, 则显示用户名并显示退出按钮, 否则显示注册和登录
      if (localStorage.username) {
        var oUsername = document.querySelector('a[name=username]');
        var oLogout = document.querySelector('.logout');
        oUsername.innerText = localStorage.username;
        oUsername.style.display = 'inline';
        oLogout.style.display = 'inline';
      } else {
        var oRegister = document.querySelector('.register');
        var oLogin = document.querySelector('.login');
        oRegister.style.display = 'inline';
        oLogin.style.display = 'inline';
      }
    </script>
				</div>
				<div id="top-tipfl"><a href="index.html"><img src="img/TB1yRiUQVXXXXaAXFXXXXXXXXXX-620-220.png"/></a></div>
			</div>
			
		</div>
    <!--<img id="yitaologo" src="img/TB1yRiUQVXXXXaAXFXXXXXXXXXX-620-220.png" />-->
		<div class="daohang">
    <ul id="cat" class="cat"></ul>
    </div>
     <a href="cart.html">购物车</a>
    <a href="order.html">我的订单</a>
    <script>
    var oCat = document.querySelector('#cat');
    myajax.get('http://h6.duchengjiu.top/shop/api_cat.php', {}, function(error, responseText){
        var json = JSON.parse(responseText);//返回的整个json对象
        var data = json.data;//json对象当中的data是一个数组
        for (var i = 0; i < data.length; i++) {
          var obj = data[i];//数组里面的每一项是一个商品分类的对象
          oCat.innerHTML += `<li><a href="list.html?cat_id=${obj.cat_id}">${obj.cat_name}</a></li>`;
        }
    });
    </script>
  </div></header>
  <script src="js/myajax.js" charset="utf-8"></script>

  <main>
    <ul id="goods"></ul>
  </main>
  <script>
    var oGoods = document.querySelector('#goods');
    var goods_id = getQueryString('goods_id');
    console.log(goods_id);
    myajax.get('http://h6.duchengjiu.top/shop/api_goods.php', {
      // goods_id: goods_id ES5
      goods_id //ES6
    }, function(err, responseText){
      var json = JSON.parse(responseText);
      var obj = json.data[0];
      console.log(json);
      oGoods.innerHTML = `
      <div class="buyxinxi">
        <div><img src="${obj.goods_thumb}"></div>
        <div class='xinxi'>
        <div class="desc">${obj.goods_desc}</div>
        <br>
        <div class="miaoshu">${obj.goods_name}</div>
        <br>
        <div><p class="price">价格:${obj.price}</p></div>
        <div class="yunfei">
        <p>运费:北京至<a>西安</a>&nbsp;&nbsp;快递：0.00</p>
        <p>月销量:678&nbsp;&nbsp;&nbsp;&nbsp;累计评价:211 &nbsp;&nbsp;&nbsp;&nbsp;送天猫积分:156</p>
        <p>数量:<input type="text" id="shuliang" value="1" >&nbsp;&nbsp;&nbsp;&nbsp;库存:257件</p>
        </div>
         <div><input type="button" id="add-to-buy" value="立即购买"></div>
        <div><input type="button" id="add-to-cart" value="添加到购物车"></div>
        </div>
      </div>
      `;
    });

    document.body.onclick = function(event) {
      event = event || window.event;
      var target = event.target || event.srcElement;
      if (target.id === 'add-to-cart') {
        if (!localStorage.token) {
          alert('请先登录再购买');
          //把当前商品的详细地址存储到localStorage.backurl
          localStorage.backurl = location.href
          //跳转到登录页
          location.href = "login.html";
          return;
        }
        console.log('添加到购物车');
        myajax.post('http://h6.duchengjiu.top/shop/api_cart.php?token='+localStorage.token,
        {goods_id, number:1},
        function(err, responseText) {
          var json = JSON.parse(responseText);
          console.log(json);
          if (json.code === 0) {
            alert('添加到购物车成功');
          }
        })
      }
    }
  </script>
	</body>
</html>
